<!-- 个人中心 -->
<template>
	<view>
		<view class="gg"></view>
		<view class="body-box">
			<view class="game-box">
				<view class="gameover">Game Over ！</view>
				<view class="title-box">狗了个狗</view>
				<view class="icon-box">
					<view @click="payBtn(index)" :class="item.hide == true ? 'item-hide': '' " :imgIdx="item.idx" :x="item.x" :y="item.y" :dep="item.layerIndex" class="item" :style="{left:item.x+'%',top:item.y+'%',backgroundImage: 'url(http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220831/1c51a86a5ee14340895f27a5ddd8f774.jpg)'}" v-for="(item, index) in iconList" :key="index"></view>
				</view>
				<view class="sel-box"></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					nickName: '未知',
					signName: 'TA很神秘，什么也没留下'
				},
				iconList:[
				],
				mapDa: null,
				iconwidth: 14,
			}
		},
		onLoad() {
			this.init();
		},
		methods: {
			init() {
				this.mapDa = new Map();
				var mapSelect = new Map();
				var selIconCount = 0;
				//图标1-n 的组数
				//var iconGroupCounts = [3,5,4,2,4];
				var iconGroupCounts = [3,5,4,5,4,5,2,5,4,5,3,3];
				//每层 图标个数(注意：总和需要等于 iconGroupCounts总和的3倍)
				//var layerIconCounts=[4,8,6,9,12,7,8];
				var layerIconCounts=[1,4,6,18,10,8,15,12,16,13,12,5,14,10];
				//每一层图标 起始点偏移位置，以及矩阵大小
				//var layerStartXY = [[24,3],[12,5],[12,5],[12,5],[12,5],[12,5],[12,5]];
				var layerStartXY = [[42,1],[28,3],[28,3],[14,5],[14,5],[14,5],[14,5],[14,5],[14,5],[14,5],[14,5],[28,3],[14,5],[14,5]];
				//生成图标数组
				var iconRandomArr = this.genIconList(iconGroupCounts);
				//随机打乱顺序
				this.randomSort(iconRandomArr);
				
				var gradx=7,grady=7;
				
				//生成图标地图
				//每层icon 的数量
				var htm = '';
				var idnum = 0;
				
				//循环每层
				for(var layerIndex=0;layerIndex<layerIconCounts.length;layerIndex++){
					//每层 放标签个数
					for(var c=1;c<=layerIconCounts[layerIndex];c++){
						//在layerStartXY[layerIndex] 矩阵范围内随机生成图标
						var icon = this.genIconHtml(iconRandomArr[idnum],layerIndex,layerStartXY[layerIndex]);
						this.iconList.push(icon);
						idnum++;
					}
				}
				this.checkHideOrShow();
			},
			genIconList(iconGroupCounts) {
				var iconRandomArr = [];
				for(var iconIndx=1;iconIndx<=iconGroupCounts.length;iconIndx++){
					for(var idx=0;idx<3*iconGroupCounts[iconIndx-1];idx++){
						iconRandomArr.push(iconIndx);
					}
				}
				return iconRandomArr;
			},
			//随机打乱数组排序
			randomSort(iconRandomArr){
				for(var i=0;i<iconRandomArr.length;i++){
					var randomNum = Math.floor(Math.random()*iconRandomArr.length);
					var temp = iconRandomArr[i];
					iconRandomArr[i]=iconRandomArr[randomNum];
					iconRandomArr[randomNum] = temp;
				}
				return iconRandomArr;
			},
			//在layerStartXY n*n矩阵方位内生成图标
			genIconHtml(imgIdx,layerIndex,layerStartXY){
				var active =true;
				var randomX =  0;
				var randomY = 0;
				var rand = 0;
				while(active){
					active=false;
					rand = Math.floor(Math.random()*layerStartXY[1]*layerStartXY[1]);
					randomX = rand%layerStartXY[1];
					randomY = Math.floor(rand/layerStartXY[1]);
					
					var vl = layerIndex*100+rand;
					if(this.mapDa.has(vl)){
						active = true;
					}else{
						this.mapDa.set(vl,1);
					}
				}
				var pri = 0;
				var lt = Math.floor(Math.random()*4);
				if(layerIndex%2==0){
					pri = 7;
				}
				var x =0;
				var y=0;
				if(lt==0){
					x = randomX*this.iconwidth+pri+layerStartXY[0];
					y = randomY*this.iconwidth+layerStartXY[0];
				}else if(lt==1){
					x = randomX*this.iconwidth-pri+layerStartXY[0];
					y = randomY*this.iconwidth+layerStartXY[0];
				}else if(lt==2){
					x = randomX*this.iconwidth+layerStartXY[0];
					y = randomY*this.iconwidth-pri+layerStartXY[0];
				}else if(lt==3){
					x = randomX*this.iconwidth+layerStartXY[0];
					y = randomY*this.iconwidth+pri+layerStartXY[0];
				}
				
				var icon = {
					imgIdx: imgIdx,
					x: x,
					y: y,
					dep: layerIndex,
					left: x,
					top: y,
					imgsrc: ''
				}
				return icon;
			},
			//设置图标可选和不可选
			checkHideOrShow(){
				for(var i=0;i<this.iconList.length;i++){
					var icon = this.iconList[i];
					var x = icon.x;
					var y = icon.y;
					var dep = icon.dep;
					var show = true;
					var next = i+1;
					for(var j=next;j<this.iconList.length;j++){
						var nextIcon = this.iconList[j];
						var x2 = nextIcon.x;
						var y2 = nextIcon.y;
						var dep2 = nextIcon.dep;
						if( x2>x-this.iconwidth && y2>y-this.iconwidth && x2<x+this.iconwidth && y2<y+this.iconwidth){
							icon.hide = true;
							show = false;
							break;
						}
					}
					if(show){
						icon.hide = false;
					}
				}
			},
			payBtn(index) {
				this.iconList[index].hide = true;
				this.$forceUpdate();
				this.selectIconAction(index);
			},
			selectIconAction(index){
				this.iconList.splice(index,1);
				this.checkHideOrShow();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body-box{
		position:relative;
		width:100%;
		height:100%;
		//background-image:url(../img/bg.jpeg);
		background-repeat: no-repeat;
		background-color:#00a0e9
	}
	.title-box{
		width:100%;
		height:45px;
		line-height:45px;
		font-size:25px;
		font-weight:bold;
		text-align:center;
		color:#fff;
	}
	.game-box{
		float:center;
		width:100%;
		height:600px;
	}
	.icon-box{
		position:relative;
		width:98%;
		padding-top:98%;
		margin:auto;
	}
	.sel-box{
		position:relative;
		margin:auto;
		margin-top:50px;
		width:98%;
		/*padding-top:14%;*/
		border:1px solid #000;
		background-color:#fff;
	}
	.icon-box .item{
		position:absolute;
		width:14%;
		/*height:12%;*/
		padding-bottom:calc(14% - 2px);;
		border:0px solid #000;
		box-shadow: 0px 2px 0px 0px;
		cursor:pointer;
		background-color: red;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius:8px;
	}
	.sel-box .item{
		float:left;
		width:14%;
		/*height:12%;*/
		padding-bottom:calc(14% - 2px);;
		border:0px solid #000;
		cursor:pointer;
		background-color: red;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-shadow: 0px 2px 0px 0px;
		border-radius:8px;
	}
	.item-hide{
		-webkit-filter: brightness(50%);
		filter: brightness(50%);
	}
	
	.gameover{
		display:none;
		width:100%;
		height:100%;
		text-align:center;
		line-height:400px;
		font-weight:bold;
		color:#000;
		font-size:40px;
		position:absolute;
		z-index:999
	}
	.btn-box{
		position:relative;
		width:100%;
		height:50px;
	}
	.btn{
		width:120px;
		line-height:35px;
		background-color:#fff;
		color:#000;
		border:1px solid #fff;
		border-radius: 5px;
		box-shadow: 3px 3px 0px 0px ;
		cursor:pointer;
		margin-left:30px;
	}
	.gg{
		width:100%;
		height:100%;
		z-index:9999;
		display: none;
		font-size:18px;
		font-weight:bold;
		padding-left:30px;
	}
</style>
